<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色选择器</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">


</head>
<!--
   在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，
   它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色。
   -->
<body>

<div id="test1"></div>
<script src="../zujian/layui/layui.all.js"></script>
<script>
    layui.use('colorpicker', function(){
        let colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
            elem: '#test1'  //绑定元素
            ,color:'#3f9932'// 默认颜色
        //     颜色显示/输入格式，可选值： hex、rgb
        // 若在 rgb 格式下开启了透明度，格式会自动变成 rgba。
        // 在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。
            ,format:'rgb'
//             是否开启透明度，若不开启，则不会显示透明框。
//             开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式，组件会默认加上值为 1 的透明度。
//             相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。
// 注意：该参数必须配合 rgba 颜色值使用
            ,alpha:true
            // 预定义颜色是否开启//就是下面有2行常用颜色
            ,predefine:true
            // 预定义颜色，此参数需配合 predefine: true 使用。
            //,colors:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']

            //下拉框大小  // 	下拉框大小，可以选择：lg、sm、xs。
            ,size:'lg'
            // 颜色被改变的时候的回调
            ,change: function(color){
                //比如 rgba(255, 69, 0,  0.68)
                alert(color)
            }
            ,done: function(color){
                //颜色选择后的回调
                //点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值。
                alert(color)
                //譬如你可以在回调中把得到的 color 赋值给表单
            }
        });
    });
</script>
</body>
</html>